<template>
  <div class="page-container">
    <div id="tableContainer" style="width: 1200px; height: 400px"></div>
  </div>
</template>

<script>
import * as VTable from "@visactor/vtable";
import { getData, getLayout ,getOptionsMock} from "./mock";
export default {
  data() {
    return {
      tableInstance: null,
    };
  },
  methods: {
    init() {
      const { option } = this.getOptions();
      this.tableInstance = new VTable.PivotTable(
        document.getElementById("tableContainer"),
        option
      );
    },
    getOptions() {
      const data = getData();
      console.log("data", data);
      // const layout1 = this.getLayout1()
      const layout2 = this.getLayout2();
      const layout3 = getOptionsMock()
      console.log('layout3',layout3);
      // const data1 = layout2.rowTree.map(item=> {
      //   return {
      //     label:
      //   }
      // })
      // console.log('data1',data1);
      const option = {
        records: data,
        // ...layout1,
        // ...layout2,
        ...layout3,
        widthMode: "standard",
      };
      return {
        option,
      };
    },
    getLayout2() {
      // const list1 = getLayout().columList
      // console.log('list1',list1);
      return {
        rowTree: [
          {
            dimensionKey: "City",
            value: "Aberdeen",
          },
          {
            dimensionKey: "City",
            value: "Abilene",
          },
          {
            dimensionKey: "City",
            value: "Akron",
          },
          {
            dimensionKey: "City",
            value: "Albuquerque",
          },
          {
            dimensionKey: "City",
            value: "Alexandria",
          },
          {
            dimensionKey: "City",
            value: "Allen",
          },
          {
            dimensionKey: "City",
            value: "Allentown",
          },
          {
            dimensionKey: "City",
            value: "Altoona",
          },
          {
            dimensionKey: "City",
            value: "Amarillo",
          },
          {
            dimensionKey: "City",
            value: "Anaheim",
          },
          {
            dimensionKey: "City",
            value: "Andover",
          },
          {
            dimensionKey: "City",
            value: "Ann Arbor",
          },
          {
            dimensionKey: "City",
            value: "Antioch",
          },
          {
            dimensionKey: "City",
            value: "Apopka",
          },
          {
            dimensionKey: "City",
            value: "Apple Valley",
          },
          {
            dimensionKey: "City",
            value: "Appleton",
          },
          {
            dimensionKey: "City",
            value: "Arlington",
          },
          {
            dimensionKey: "City",
            value: "Arlington Heights",
          },
          {
            dimensionKey: "City",
            value: "Arvada",
          },
          {
            dimensionKey: "City",
            value: "Asheville",
          },
          {
            dimensionKey: "City",
            value: "Athens",
          },
          {
            dimensionKey: "City",
            value: "Atlanta",
          },
          {
            dimensionKey: "City",
            value: "Atlantic City",
          },
          {
            dimensionKey: "City",
            value: "Auburn",
          },
          {
            dimensionKey: "City",
            value: "Aurora",
          },
          {
            dimensionKey: "City",
            value: "Austin",
          },
          {
            dimensionKey: "City",
            value: "Avondale",
          },
          {
            dimensionKey: "City",
            value: "Bakersfield",
          },
          {
            dimensionKey: "City",
            value: "Baltimore",
          },
          {
            dimensionKey: "City",
            value: "Bangor",
          },
          {
            dimensionKey: "City",
            value: "Bartlett",
          },
          {
            dimensionKey: "City",
            value: "Bayonne",
          },
          {
            dimensionKey: "City",
            value: "Baytown",
          },
          {
            dimensionKey: "City",
            value: "Beaumont",
          },
          {
            dimensionKey: "City",
            value: "Bedford",
          },
          {
            dimensionKey: "City",
            value: "Belleville",
          },
          {
            dimensionKey: "City",
            value: "Bellevue",
          },
          {
            dimensionKey: "City",
            value: "Bellingham",
          },
          {
            dimensionKey: "City",
            value: "Bethlehem",
          },
          {
            dimensionKey: "City",
            value: "Beverly",
          },
          {
            dimensionKey: "City",
            value: "Billings",
          },
          {
            dimensionKey: "City",
            value: "Bloomington",
          },
          {
            dimensionKey: "City",
            value: "Boca Raton",
          },
          {
            dimensionKey: "City",
            value: "Boise",
          },
          {
            dimensionKey: "City",
            value: "Bolingbrook",
          },
          {
            dimensionKey: "City",
            value: "Bossier City",
          },
          {
            dimensionKey: "City",
            value: "Bowling Green",
          },
          {
            dimensionKey: "City",
            value: "Boynton Beach",
          },
          {
            dimensionKey: "City",
            value: "Bozeman",
          },
          {
            dimensionKey: "City",
            value: "Brentwood",
          },
        ],
        columnTree: [
          {
            dimensionKey: "Category",
            value: "Office Supplies",
            children: [
              {
                indicatorKey: "Quantity",
              },
              {
                indicatorKey: "Sales",
              },
              {
                indicatorKey: "Profit",
              },
            ],
          },
          {
            dimensionKey: "Category",
            value: "Technology",
            children: [
              {
                indicatorKey: "Quantity",
              },
              {
                indicatorKey: "Sales",
              },
              {
                indicatorKey: "Profit",
              },
            ],
          },
          {
            dimensionKey: "Category",
            value: "Furniture",
            children: [
              {
                indicatorKey: "Quantity",
              },
              {
                indicatorKey: "Sales",
              },
              {
                indicatorKey: "Profit",
              },
            ],
          },
        ],
        rows: [
          {
            dimensionKey: "City",
            title: "City",
            headerStyle: {
              textStick: true,
            },
            width: "auto",
          },
        ],
        columns: [
          {
            dimensionKey: "Category",
            title: "Category",
            headerStyle: {
              textStick: true,
            },
            width: "auto",
          },
        ],
        indicators: [
          {
            indicatorKey: "Quantity",
            title: "Quantity",
            width: "auto",
            showSort: false,
            headerStyle: {
              fontWeight: "normal",
            },
            format: (rec) => {
              console.log('rec',rec);
              const value = rec["Sales"] || rec["Quantity"] || rec["Profit"];
              // return "$" + Number(value).toFixed(2);
              // return value
              return "$" + Number(rec["Quantity"]).toFixed(2);
            },
            style: {
              padding: [16, 28, 16, 28],
              color(args) {
                if (args.dataValue >= 0) return "black";
                return "red";
              },
            },
          },
          {
            indicatorKey: "Sales",
            title: "Sales",
            width: "auto",
            showSort: false,
            headerStyle: {
              fontWeight: "normal",
            },
            format: (rec) => {
              const value = rec["Sales"] || rec["Quantity"] || rec["Profit"];
              return "$" + Number(value).toFixed(2);
              // return "$" + Number(rec?.["Sales"]).toFixed(2);
            },
            style: {
              padding: [16, 28, 16, 28],
              color(args) {
                if (args.dataValue >= 0) return "black";
                return "red";
              },
            },
          },
          {
            indicatorKey: "Profit",
            title: "Profit",
            width: "auto",
            showSort: false,
            headerStyle: {
              fontWeight: "normal",
            },
            format: (rec) => {
              const value = rec["Sales"] || rec["Quantity"] || rec["Profit"];
              return "$" + Number(value).toFixed(2);
              // return "$" + Number(rec["Profit"]).toFixed(2);
            },
            style: {
              padding: [16, 28, 16, 28],
              color(args) {
                if (args.dataValue >= 0) return "black";
                return "red";
              },
            },
          },
        ],
        corner: {
          titleOnDimension: "row",
          headerStyle: {
            textStick: true,
          },
        },
      };
    },
    getLayout1() {
      return {
        rowTree: [
          {
            dimensionKey: "City",
            value: "Aberdeen",
          },
          {
            dimensionKey: "City",
            value: "Abilene",
          },
          {
            dimensionKey: "City",
            value: "Akron",
          },
          {
            dimensionKey: "City",
            value: "Albuquerque",
          },
          {
            dimensionKey: "City",
            value: "Alexandria",
          },
          {
            dimensionKey: "City",
            value: "Allen",
          },
          {
            dimensionKey: "City",
            value: "Allentown",
          },
          {
            dimensionKey: "City",
            value: "Altoona",
          },
          {
            dimensionKey: "City",
            value: "Amarillo",
          },
          {
            dimensionKey: "City",
            value: "Anaheim",
          },
          {
            dimensionKey: "City",
            value: "Andover",
          },
          {
            dimensionKey: "City",
            value: "Ann Arbor",
          },
          {
            dimensionKey: "City",
            value: "Antioch",
          },
          {
            dimensionKey: "City",
            value: "Apopka",
          },
          {
            dimensionKey: "City",
            value: "Apple Valley",
          },
          {
            dimensionKey: "City",
            value: "Appleton",
          },
          {
            dimensionKey: "City",
            value: "Arlington",
          },
          {
            dimensionKey: "City",
            value: "Arlington Heights",
          },
          {
            dimensionKey: "City",
            value: "Arvada",
          },
          {
            dimensionKey: "City",
            value: "Asheville",
          },
          {
            dimensionKey: "City",
            value: "Athens",
          },
          {
            dimensionKey: "City",
            value: "Atlanta",
          },
          {
            dimensionKey: "City",
            value: "Atlantic City",
          },
          {
            dimensionKey: "City",
            value: "Auburn",
          },
          {
            dimensionKey: "City",
            value: "Aurora",
          },
          {
            dimensionKey: "City",
            value: "Austin",
          },
          {
            dimensionKey: "City",
            value: "Avondale",
          },
          {
            dimensionKey: "City",
            value: "Bakersfield",
          },
          {
            dimensionKey: "City",
            value: "Baltimore",
          },
          {
            dimensionKey: "City",
            value: "Bangor",
          },
          {
            dimensionKey: "City",
            value: "Bartlett",
          },
          {
            dimensionKey: "City",
            value: "Bayonne",
          },
          {
            dimensionKey: "City",
            value: "Baytown",
          },
          {
            dimensionKey: "City",
            value: "Beaumont",
          },
          {
            dimensionKey: "City",
            value: "Bedford",
          },
          {
            dimensionKey: "City",
            value: "Belleville",
          },
          {
            dimensionKey: "City",
            value: "Bellevue",
          },
          {
            dimensionKey: "City",
            value: "Bellingham",
          },
          {
            dimensionKey: "City",
            value: "Bethlehem",
          },
          {
            dimensionKey: "City",
            value: "Beverly",
          },
          {
            dimensionKey: "City",
            value: "Billings",
          },
          {
            dimensionKey: "City",
            value: "Bloomington",
          },
          {
            dimensionKey: "City",
            value: "Boca Raton",
          },
          {
            dimensionKey: "City",
            value: "Boise",
          },
          {
            dimensionKey: "City",
            value: "Bolingbrook",
          },
          {
            dimensionKey: "City",
            value: "Bossier City",
          },
          {
            dimensionKey: "City",
            value: "Bowling Green",
          },
          {
            dimensionKey: "City",
            value: "Boynton Beach",
          },
          {
            dimensionKey: "City",
            value: "Bozeman",
          },
          {
            dimensionKey: "City",
            value: "Brentwood",
          },
        ],
        columnTree: [
          {
            dimensionKey: "Category",
            value: "Office Supplies",
            children: [
              {
                indicatorKey: "Quantity",
              },
              {
                indicatorKey: "Sales",
              },
              {
                indicatorKey: "Profit",
              },
            ],
          },
          {
            dimensionKey: "Category",
            value: "Technology",
            children: [
              {
                indicatorKey: "Quantity",
              },
              {
                indicatorKey: "Sales",
              },
              {
                indicatorKey: "Profit",
              },
            ],
          },
          {
            dimensionKey: "Category",
            value: "Furniture",
            children: [
              {
                indicatorKey: "Quantity",
              },
              {
                indicatorKey: "Sales",
              },
              {
                indicatorKey: "Profit",
              },
            ],
          },
        ],
        rows: [
          {
            dimensionKey: "City",
            title: "City",
            headerStyle: {
              textStick: true,
            },
            width: "auto",
          },
        ],
        columns: [
          {
            dimensionKey: "Category",
            title: "Category",
            headerStyle: {
              textStick: true,
            },
            width: "auto",
          },
        ],
        indicators: [
          {
            indicatorKey: "Quantity",
            title: "Quantity",
            width: "auto",
            showSort: false,
            headerStyle: {
              fontWeight: "normal",
            },
            format: (rec) => {
              return "$" + Number(rec["Quantity"]).toFixed(2);
            },
            style: {
              padding: [16, 28, 16, 28],
              color(args) {
                if (args.dataValue >= 0) return "black";
                return "red";
              },
            },
          },
          {
            indicatorKey: "Sales",
            title: "Sales",
            width: "auto",
            showSort: false,
            headerStyle: {
              fontWeight: "normal",
            },
            format: (rec) => {
              return "$" + Number(rec?.["Sales"]).toFixed(2);
            },
            style: {
              padding: [16, 28, 16, 28],
              color(args) {
                if (args.dataValue >= 0) return "black";
                return "red";
              },
            },
          },
          {
            indicatorKey: "Profit",
            title: "Profit",
            width: "auto",
            showSort: false,
            headerStyle: {
              fontWeight: "normal",
            },
            format: (rec) => {
              return "$" + Number(rec["Profit"]).toFixed(2);
            },
            style: {
              padding: [16, 28, 16, 28],
              color(args) {
                if (args.dataValue >= 0) return "black";
                return "red";
              },
            },
          },
        ],
        corner: {
          titleOnDimension: "row",
          headerStyle: {
            textStick: true,
          },
        },
      };
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  #container {
    width: 800px;
    height: 600px;
  }
}
</style>
